<template>
  <div class="newOrder">
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
      <el-breadcrumb-item>新建订单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="footer-content">
      <el-button type="primary toRight" @click="submitInfo('editForm')">提交</el-button>
    </div>
    <el-row class="newOrder-content">
      <el-col>
        <el-form :model="editForm" label-width="100px" ref="editForm" :rules="rules">
          <el-col>
            <div style="float:left;width: 5px;height: 20px; background:#58B7FF;margin-right: 9px">
            </div>
            <span>购车人</span>
            <br/>
            <br/>
            <el-form-item label="姓名" prop="customerName">
              <el-input v-model="editForm.customerName" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="customerIdCard">
              <el-input v-model="editForm.customerIdCard" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-form-item label="婚姻状态" prop="bemarried">
              <el-select v-model="editForm.bemarried" placeholder="请选择" style="width: 230px" @change="initUpload()">
                <el-option v-for="item in $store.state.marryStatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="贷款银行" prop="bankName">
              <el-select v-model="editForm.bankName" placeholder="请选择" style="width: 230px">
                <el-option v-for="item in $store.state.bank" :key="item.value" :label="item.text" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-row :gutter="5">
              <p>上传资料</p>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="11"></upload>
                  <span>身份证正面</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="12"></upload>
                  <span>身份证背面</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="13"></upload>
                  <span>授权书</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="14"></upload>
                  <span>授权书面签</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-if="this.editForm.bemarried in ['0','1']">
            <div style="float:left;width: 5px;height: 20px; background:#58B7FF;margin-right: 9px">
            </div>
            <span>共同购车人</span>
            <br/>
            <br/>
            <el-form-item label="姓名" prop="commonName">
              <el-input v-model="editForm.commonName" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="commonIdCard">
              <el-input v-model="editForm.commonIdCard" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-row :gutter="5">
              <p>上传资料</p>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="21"></upload>
                  <span>身份证正面</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="22"></upload>
                  <span>身份证背面</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="23"></upload>
                  <span>授权书</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="24"></upload>
                  <span>授权书面签</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-for="item in editForm.items" :key="item">
            <div style="padding:3px; float:left;width:0px;height: 20px; background:#58B7FF;margin-right: 9px">
            </div>
            <span>担保人</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button @click="deleteGuarantee(item)">删除</el-button>
            <br/>
            <br/>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="item.guaranteeName" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="author">
              <el-input v-model="item.guaranteeAuthor" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-row :gutter="5">
              <p>上传资料</p>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="guarantee"></upload>
                  <span>身份证正面</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="32"></upload>
                  <span>身份证背面</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="33"></upload>
                  <span>授权书</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <upload class="upload" ref="34"></upload>
                  <span>授权书面签</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-col>
      <el-col>
        <el-button @click="addGuarantee" v-show="this.ensureNum<5"><i class="el-icon-plus"></i> 新增担保人</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
import ElCol from 'element-ui/packages/col/src/col'
import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
import ElRow from 'element-ui/packages/row/src/row'
import $ from 'jquery'

export default {
  components: {
    ElRow,
    ElForm,
    ElCol,
    ElFormItem,
    upload: require('../../components/other/upload')
  },
  data() {
    return {
      filters: {
        name: ''
      },
      annexBatchNo: 'string',
      orderNo: '',
      loading: false,
      value: '',
      editFormVisible: false,
      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      ensureNum: 1,
      rules: {
        customerName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        customerIdCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        // bemarried: [
        //    {required: true, message: '请选择婚姻状态', trigger: 'change'}
        // ],
        // bankName: [
        //   {required: true, message: '请选择银行', trigger: 'change'}
        // ],
        commonName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        commonIdCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ]
      },
      form: {
        policy: '',
        signature: '',
        expire: '',
        OSSAccessKeyId: '',
        name: '',
        key: '',
        success_action_status: '200', //让服务端返回200,不然，默认会返回204
        callback: ''
      },

      editForm: {
        customerName: '',
        customerIdCard: '',
        commonName: '',
        commonIdCard: '',
        bemarried: '',
        bankName: '',
        bankId: 0,
        items: [{
          guaranteeName: '',
          guaranteeAuthor: '',
          img: { img1: '', img2: '', img3: '', img4: '' }
        }]
      },
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
    },

    addGuarantee: function() {
      this.ensureNum++;
      this.initUpload();
      this.editForm.items.push({
        name: '',
        author: '',
        img: { img1: '', img2: '', img3: '', img4: '' }
      })
    },

    deleteGuarantee: function(item) {
      var index = this.editForm.items.indexOf(item)
      if (index !== -1) {
        this.ensureNum--;
        this.editForm.items.splice(index, 1)
      }
    },

    initUpload: function() {
      this.$nextTick(() => {
        console.log(this);
        this.$refs.guarantee.isOne = true;
        this.$refs.guarantee.type = 1;
        this.$refs.guarantee.id = this.annexBatchNo;
        this.$refs.guarantee.group = 3;
        $.each(this.$refs, ((i, val) => {
          val.isOne = true;
          val.type = 0;
          val.id = this.annexBatchNo;
          val.group = 3;
          console.log(i);
          switch (i) {
            case '11':
              val.group = 1;
              break;
            case '12':
              val.group = 1;
              break;
            case '13':
              val.group = 1;
              break;
            case '14':
              val.group = 1;
              break;
            case '21':
              val.group = 2;
              break;
            case '22':
              val.group = 2;
              break;
            case '23':
              val.group = 2;
              break;
            case '24':
              val.group = 2;
              break;
            default:
              val.group = 3;
              break;
          };

        }));

      });


    },

    submitInfo: function(formName) {
      var formJson = {};

      var orderCreditAddFormList = [];

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('上传中!')
        } else {
          console.log('error submit!!!')
          return false;
        }
      })
      debugger;
      formJson.terminalType = 'pc';
      formJson.bemarried = this.editForm.bemarried;
      formJson.bankName = this.editForm.bankName;
      formJson.bankId = this.$libs.jsonGetId(this.$store.state.bank, this.editForm.bankName);
      formJson.orderNo = this.orderNo;

      //购车人
      var OrderCreditAddForm1 = {};
      OrderCreditAddForm1.customerType = 1;
      OrderCreditAddForm1.customerName = this.editForm.customerName;
      OrderCreditAddForm1.idCard = this.editForm.customerIdCard;
      OrderCreditAddForm1.annexBatchNo = this.annexBatchNo;
      orderCreditAddFormList.push(OrderCreditAddForm1);

      if (this.editForm.bemarried in ['0', '1']) {
        //共同购车人
        var OrderCreditAddForm2 = {};
        OrderCreditAddForm2.customerType = 2;
        OrderCreditAddForm2.customerName = this.editForm.commonName;
        OrderCreditAddForm2.idCard = this.editForm.commonIdCard;
        OrderCreditAddForm2.annexBatchNo = this.annexBatchNo;
        orderCreditAddFormList.push(OrderCreditAddForm2);
      }

      let that = this;
      $.each(this.editForm.items, function(index, value) {
        var OrderCreditAddForm3 = {};
        OrderCreditAddForm3.customerType = 3;
        OrderCreditAddForm3.customerName = value.guaranteeName;
        OrderCreditAddForm3.idCard = value.guaranteeAuthor;
        OrderCreditAddForm3.annexBatchNo = that.annexBatchNo + '_' + index;
        orderCreditAddFormList.push(OrderCreditAddForm3);
      })

      formJson.orderCreditAddFormList = orderCreditAddFormList;


      //http://172.21.3.138:8080/order  http://localhost:8082/order
      this.$http.post("/order",
        formJson
      ).then((response) => {
        if (response.data.success) {
          console.log("状态修改成功")
          that.$message("提交成功")
        } else {
          that.$message("提交失败")
        }
        console.log(response.data);
      }).catch(function(response) {
        console.log(response)
      })
    },

    showEditDialog: function() {
      this.editFormVisible = true;
    },

    handleClick: function() {
      this.$router.push({ path: '/salesman/CreditInvestigationDetail' })
    },

    getAnnex: function() {
      this.$http.post('/annex')
        .then((response) => {
          if (response.data.success) {
            return response.data.data.annexBatchNo;
          }
        })
    }





  },
  mounted() {
    this.$store.commit('bank', this);
    this.$http.post('/order/uniqueKey')
      .then((response) => {
        if (response.data.success) {
          this.annexBatchNo = response.data.data.annexBatchNo;
          this.orderNo = response.data.data.orderNo;
          this.initUpload();
        }
      })
  }
}

</script>
<style lang="scss" scoped>
.newOrder {

  padding: 10px 16px;

  .breadcrumb {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .newOrder-content {
    position: fixed;
    top: 96px;
    bottom: 50px;
    left: 216px;
    right: 16px;
    overflow: auto;
    background: #fff;
    padding: 20px;
    .filterText {
      font-size: 14px;
      color: #475669;
      margin: 10px 5px 0px 30px;
      overflow: auto;
    }
    .photoDescription {
      text-align: right;
    }
  }
  .footer-content {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 200px;
    right: 0px;
    height: 36px;
    padding: 12px 100px 12px 50px;
    .toRight {
      position: relative;
      float: left;
      left: 50%;
    }
  }
}

</style>
